<!doctype html>
<html>

  <head>
    <meta charset="UTF-8">
    <title>发货误差</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../css/mui.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="../css/1px.css" />
    <link href="../css/mui.picker.css" rel="stylesheet" />
    <link rel="stylesheet" href="../css/mui.poppicker.css" />
    <link rel="stylesheet" href="../css/mui.dtpicker.css" />
    <style>
      html {
        font-family: Roboto, Arial, "Noto Sans CJK SC", "Noto Sans CJK TC", "Pingfang SC", "Microsoft Yahei", "WenQuanYi Micro Hei", sans-serif;
      }
      
      body {
        overflow-x: hidden;
        background-color: #fff !important;
      }
      
      .mui-content {
        background-color: #fff;
      }
      /*查询*/
      
      .time-box {
        margin-top: 5px;
        padding: 0 10px;
      }
      
      .span-time {
        text-align: center;
        line-height: 24px;
        font-size: 14px;
      }
      
      .time-check {
        width: 95%;
        border: 1px solid #C0C0C0;
        border-radius: 3px;
        line-height: 24px;
        font-size: 14px;
        color: #ACACB4;
        text-indent: 5px;
      }
      
      .status-box {
        width: 90%;
        border: 1px solid #C0C0C0;
        border-radius: 3px;
        line-height: 24px;
        font-size: 14px;
        color: #ACACB4;
        text-indent: 5px;
        margin-left: 5%;
        margin-top: 5px;
        position: relative;
      }
      
      .mui-icon-arrowdown {
        font-size: 14px;
        position: absolute;
        right: 5px;
        top: 5px;
      }
      
      .search-btn {
        width: 90%;
        margin-top: 30px;
        background-color: #ff6600;
        border-color: #ff6600;
      }
      .search-btn:active{
      	background-color: #e6c697;
      }
      /**/
     
     .mui-scroll-wrapper {
        top: 66px;
        bottom: 4px;
      }
      /*列表*/
      
      .error-goods-list {
        margin-top: 5px;
      }
      
      .goods-each {
        font-size: 13px;
        line-height: 26px;
        position: relative;
        margin-top: 4px;
      }
      
      .img-box {
        text-align: center;
      }
      
      .img-box img {
        height: 70px;
        width: 70px;
        vertical-align: middle;
      }
      
      .error-num {
        position: absolute;
        margin-right: 20px;
        color: red;
        bottom: 20px;
        right: 10px;
      }
      
      .reason-fix {
        height: 40px;
        line-height: 40px;
      }
      .choose-btn{
      	background-color: #FF9800;
      	border-color: #FF9800;
      	color: #FFFFFF;
      }
      .choose-btn:active{
      	background-color: #e6c697;
      }
      .fixed-num {
        margin-left: 5px;
      }
       /*加载*/
      
      .mui-pull-bottom-pocket {
        visibility: visible;
      }
      
      .mui-pull-bottom-pocket .mui-pull-loading {
        visibility: visible;
      }
       /*无*/
     .no{
     	text-align: center;
     	line-height: 30px;
     }
    </style>
  </head>

  <body>
    <div class="mui-content">
      <div class="mui-row">
        <div class="mui-col-xs-9 mui-col-sm-9">
          <div class="mui-row time-box">
            <div class="mui-col-xs-5 mui-col-sm-5">
              <div class=" time-check fromTime">
                2017-12-01
              </div>
            </div>
            <div class="mui-col-xs-2 mui-col-sm-2 span-time">
              至
            </div>
            <div class="mui-col-xs-5 mui-col-sm-5">
              <div class="time-check endTime">
                2017-12-24
              </div>
            </div>
          </div>
          <div class="status-box">
            <span>转出产生的全部误差</span>
            <span class="mui-icon mui-icon-arrowdown"></span>
          </div>
        </div>
        <div class="mui-col-xs-3 mui-col-sm-3">
          <button type="button" class="mui-btn mui-btn-success search-btn">查询</button>
        </div>
      </div>
      <!---->
      <div class="mui-scroll-wrapper">
      	<div class="mui-scroll">
      	<ul class="mui-table-view mui-table-view-chevron error-goods-list ">
					
      	</ul>
      <!--加载中-->
          <div class="mui-pull-bottom-pocket">
            <div class="mui-pull">
            </div>
          </div>
          <!--加载中-->
      </div>
      </div>
      <script id="errorGoodsLi" type="text/html">
      	<%if(list.length>0){%>
      		<% for(var i=0;i<list.length;i++){ %>
        <li class="goods-each vux-1px-b">
          <div class="mui-row">
            <div class="img-box mui-col-xs-3">
              <img src="<%=imgPath+list[i].shopGoodsVo.wareGoods.cutImg%>" alt="" />
            </div>
            <div class="goods-info-box mui-col-xs-9">
              <div class="goods-name">
                <%=list[i].shopGoodsVo.wareGoods.name%>
              </div>
              <div class="goods-id">
                货品ID：
                <%=list[i].shopGoodsVo.wareGoods.wareGoodsId%>
              </div>
              <div class="goods-num">
                当前门店库存：
                <%=list[i].shopGoodsVo.shopGoodsAmount.amount%>
              </div>
              <span class="error-num">误差：<%=list[i].errorAmount%></span>
            </div>
          </div>
          <div class="mui-row reason-fix">
            <div class="apply-info mui-col-xs-9">
              <span class="fixed-num">调整后门店库存：<%=list[i].shopGoodsVo.shopGoodsAmount.amount - list[i].errorAmount%></span>
            </div>
            <div class="change-btn-box mui-col-xs-3">
              <div class="mui-btn mui-btn-primary choose-btn" data-id='<%=list[i].shopGoodsVo.wareGoods.wareGoodsId%>' data-index=' <%=i%>'>原因</div>
            </div>
          </div>
        </li>
        <%}%>
          <%} else {%>
        	<p class="no">暂无数据</p>
        	<%}%>
      </script>

    </div>
    <!---->
    <script src="../config.js"></script>
    <script src="../js/template-native.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/mui.min.js"></script>
    <script src="../js/mui.picker.js"></script>
    <script src="../js/mui.poppicker.js"></script>
    <script src="../js/mui.dtpicker.js"></script>
    <script type="text/javascript">
      (function($) {
        $.init()
        $.plusReady(function() {
          receiveParams()
          getList()
        })
        $.ready(function() {
          bindEvent()
          
        })
				//滚动
          $('.mui-scroll-wrapper').scroll({
            scrollY: true,
            bounce: true,
            deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006，
          });
        var fromTime = new Date().format('yyyy-MM') + '-01',
          toTime = new Date().format('yyyy-MM-dd'),
          currentShopObj = {},
          goodsErrorType = '',
          errorGoods = [],
          pageNo = 1,
          isLoading = false,
          pageTatol = 0
        //
        document.querySelector(".fromTime").innerText = fromTime
        document.querySelector(".endTime").innerText = toTime
        //接受传值
        function receiveParams() {
          var self = plus.webview.currentWebview();
          currentShopObj = self.currentShopObj;
        }
        //获取数据
        function getList() {
        	setLoading(1)
        	isLoading = true
          config.ajax({
            type: 'post',
            url: config.basePath + '/someErrorGoods/checkSome.do',
            data: {
              fromTime: new Date(fromTime + ' 00:00:00').getTime(),
              toTime: new Date(toTime + ' 23:59:59').getTime(),
              storeId: currentShopObj.storeId,
              isRecevingGoods: false,
              goodsErrorType: goodsErrorType,
              pageNo:pageNo
            },
            success: function(res) {
              if(res.result === 1) {
              	pageTatol = res.errorGoods.pageTatol
              	for( var k=0;k<res.errorGoods.data.length;k++){
              		errorGoods.push(res.errorGoods.data[k])
              	}
                setPage(errorGoods)
                isLoading = false
                setLoading(0)
              } else {
              	if(errorGoods.length===0){
              		$.toast(res.errormsg)
                	setPage([])
              	} else {
              		$.toast(res.errormsg)
              	}
              	isLoading = false
                 setLoading(0)
              }
            }
          })
        }
        //设置加载状态
        function setLoading(type) {
          switch(type) {
            case 1:
              document.querySelector(".mui-pull").innerHTML = '<div class="mui-pull-loading mui-icon mui-spinner"></div>\
						<div class="mui-pull-caption">正在加载</div>'
              break
            case 2:
              document.querySelector(".mui-pull").innerHTML = '<div class="mui-pull-caption">没有更多</div>'
              break
            case 0:
              document.querySelector(".mui-pull").innerHTML = ''
              break
          }

        }
        //绑定
        function bindEvent() {
        	//滚动监听
        document.querySelector('.mui-scroll-wrapper').addEventListener('scrollend', function(e) {
          if(e.detail.y <= e.detail.maxScrollY) {
            if(isLoading === false) {
              if(++pageNo <= pageTatol) {
                getList()
              } else {
								setLoading(2)
              }
            }
          }
        });
          //      	时间
          var startTimePicker = new $.DtPicker({
            'type': 'date'
          })
          var startTime = document.querySelector(".fromTime")
          startTime.addEventListener('tap', function() {
            startTimePicker.show(function(item) {
              startTime.innerText = item.text
              fromTime = item.text
            })
          })
          var endTimePicker = new $.DtPicker({
            'type': 'date'
          })
          var endTime = document.querySelector(".endTime")
          endTime.addEventListener('tap', function() {
            endTimePicker.show(function(item) {
              endTime.innerText = item.text
              toTime = item.text
            })
          })
          //类型选择
          var typePicker = new $.PopPicker();
          typePicker.setData([{
              value: '',
              text: '转出产生的全部误差'
            },
            {
              value: 1,
              text: '退库产生的误差'
            },
            {
              value: 2,
              text: '转给其他门店产生的误差'
            }

          ])
          var typeCheck = document.querySelector(".status-box")
          typeCheck.addEventListener('tap', function() {
            typePicker.show(function(item) {
              document.querySelectorAll(".status-box>span")[0].innerText = item[0].text
              goodsErrorType = item[0].value
            })
          })
          //查询
          var searchBtn = document.querySelector(".search-btn")
          searchBtn.addEventListener('tap', function() {
          	pageNo = 1
          	errorGoods = []
          	 mui('.mui-scroll-wrapper').scroll().scrollTo(0,0,100)
            getList()
          })
          //详情
          $(".error-goods-list").on('tap', '.choose-btn', function(e) {
            var goodsId = this.getAttribute('data-id')
            var index = this.getAttribute('data-index')*1
            var titleText = '我的库存误差'
            $.openWindow({
              url: 'goodsError.html',
              id: 'goodsError',
              styles: {
                top: 0, //新页面顶部位置
                bottom: 0, //新页面底部位置
                titleNView: {
                  titleText: titleText,
                  titleColor: "#FFFFFF",
                  titleSize: "17px",
                  backgroundColor: "#FF6800",
                  autoBackButton: true,
                  buttons:[
									{
										float: "right",
                    fontSize: "18px",
                    fontSrc: "_www/fonts/iconfont.ttf",//wap2app内置字体文件
                    text: "\ue602",
                    onclick: function(){
                    	var topPage = plus.webview.getWebviewById('error')
                    	topPage && topPage.close('none')
											var parentPage = plus.webview.getWebviewById('myerror')
											parentPage && parentPage.close('none')
											var nowPage = plus.webview.getWebviewById('goodsError')
											nowPage && nowPage.close()
                    }
									}
									],
                  splitLine: {
                    color: "#CCCCCC",
                    height: "1px"
                  }
                }
              },
              extras: {
                currentShopObj: currentShopObj,
                fromTime: fromTime,
                toTime: toTime,
                goodsInfo: errorGoods[index],
                goodsErrorType: goodsErrorType,
                isRecevingGoods: false
              }
            })
          })
        } // 渲染页面
        function setPage(param) {
          var html = template('errorGoodsLi', {
            list: param,
            imgPath: config.imgPath
          })
          $(".error-goods-list")[0].innerHTML = html
        }
      }(mui))
    </script>
  </body>

</html>